<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="@{/js/city.json}"></script>
<script type="text/javascript" th:src="@{/js/address.js}"></script>

<head>
    <meta charset="UTF-8">
    <title>完善信息</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" th:href="@{/static/login/font.css}">
    <link rel="stylesheet" th:href="@{/static/login/login.css}">
    <link rel="stylesheet" th:href="@{/static/login/xadmin.css}">
    <script type="text/javascript" th:src="@{/static/js/jquery.min.js}"></script>

    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <style>
        .login {
            max-width: 700px;
            margin: 10px auto 0 auto;
        }
    </style>
</head>
<body class="login-bg">
<div class="mask"></div>
<div class="login layui-anim layui-anim-up">
    <div class="message">完善信息</div>
    <div id="darkbannerwrap"></div>
    <form  method="post" id="updateform">
        <label for="shopName" class="control-label start label-text ">店铺名称:</label>
        <input type="text" class="form-control " name="shopName" maxlength="20" placeholder="请输入店铺名称" id="shopName" required><span id="msg"></span><br>
        <label for="shopTypeId1" class="control-label start">店铺分类:</label><br>
        <select class="select" name="shopTypeId1" id="shopTypeId1" required>
            <option value="">请选择类别</option>
            <option th:each="type:${shopType}" th:value="${type.shopTypeId}" th:if="${type.getParentId()==0}">[[${type.shopTypeName}]]</option>
        </select>
        <select class="select" id="product" required>
            <option value="">请选择类别</option>
        </select><br>
        <label for="announcement" class="control-label">店铺描述:</label>
        <input type="text" class="form-control" name="announcement" maxlength="20" placeholder="描述" id="announcement" >
        <label for="shopAddress" class="control-label start">店铺地址:</label>
            <div class="city" id="shopAddress1">
                <select id="province" name="province" required>
                    <option value="省份/自治区">省份/自治区</option>
                </select>
                <select id="city" name="city" required>
                    <option value="城市/地区">城市/地区</option>
                </select>
                <select id="qu" name="qu" required>
                    <option value="区/县">区/县</option>0
                </select>
            </div>
        <label for="license">营业执照编号：</label>
        <input type="text" id="license" placeholder="请输入营业执照编号" name="license" required><br>
        <label for="name">联系人姓名：</label>
        <input type="text" id="name" placeholder="请输入姓名" name="name" required><br>
        <label for="shopPhone"  class="control-label">联系电话:</label>
        <input type="text" class="form-control" name="shopPhone" maxlength="20" placeholder="联系电话" id="shopPhone" required>
        <label for="shopTime1" class="control-label">营业时间:</label>
        <div id="shopTime1">
            <select name="hours" id="startTime">
                <option value="00:00">00:00</option>
                <option value="01:00">01:00</option>
                <option value="02:00">02:00</option>
                <option value="03:00">03:00</option>
                <option value="04:00">04:00</option>
                <option value="05:00">05:00</option>
                <option value="06:00">06:00</option>
                <option value="07:00">07:00</option>
                <option value="08:00">08:00</option>
                <option value="09:00">09:00</option>
                <option value="10:00">10:00</option>
                <option value="11:00">11:00</option>
                <option value="12:00">12:00</option>
                <option value="13:00">13:00</option>
                <option value="14:00">14:00</option>
                <option value="15:00">15:00</option>
                <option value="16:00">16:00</option>
                <option value="17:00">17:00</option>
                <option value="18:00">18:00</option>
                <option value="19:00">19:00</option>
                <option value="20:00">20:00</option>
                <option value="21:00">21:00</option>
                <option value="22:00">22:00</option>
                <option value="23:00">23:00</option>
            </select>
            <select name="hours" id="endTime">
                <option value="00:00">00:00</option>
                <option value="01:00">01:00</option>
                <option value="02:00">02:00</option>
                <option value="03:00">03:00</option>
                <option value="04:00">04:00</option>
                <option value="05:00">05:00</option>
                <option value="06:00">06:00</option>
                <option value="07:00">07:00</option>
                <option value="08:00">08:00</option>
                <option value="09:00">09:00</option>
                <option value="10:00">10:00</option>
                <option value="11:00">11:00</option>
                <option value="12:00">12:00</option>
                <option value="13:00">13:00</option>
                <option value="14:00">14:00</option>
                <option value="15:00">15:00</option>
                <option value="16:00">16:00</option>
                <option value="17:00">17:00</option>
                <option value="18:00">18:00</option>
                <option value="19:00">19:00</option>
                <option value="20:00">20:00</option>
                <option value="21:00">21:00</option>
                <option value="22:00">22:00</option>
                <option value="23:00">23:00</option>
            </select>
        </div>
        <label for="price" class="control-label start">起送价格:</label>
        <input type="text" class="form-control" name="price" maxlength="20" placeholder="起送价格" id="price" required>
        <label for="deliveryPrice" class="control-label start">配送费:</label>
        <input type="text" class="form-control" name="deliveryPrice" maxlength="20" placeholder="配送费" id="deliveryPrice" required>
        <input type="hidden" id="shopId" name="shopId" th:value="${shop.shopId}" >
        <input type="hidden" name="shopTime" id="shopTime">
        <input type="hidden" name="shopTypeId" id="shopTypeId">
        <input type="hidden" name="parentTypeId" id="parentTypeId">
        <input type="hidden" name="shopTypeName" id="shopTypeName">
        <input type="hidden" name="shopAddress" id="shopAddress">
        <span id="typedishemsg1" class="msg"></span>

        <input id="tj" type="submit" value="提交">
    </form>
</div>
</body>
</html>
<script>
    $(function () {
        $("#shopName").blur(function() {
            $.ajax({
                type: "GET",
                url: "/selectShopName?shopName="+$("#shopName").val(),
                success: function (result) {
                    //接收后台返回的结果
                    if (result>0) {
                        $("#msg").css("color","red")
                        $("#msg").text("该名称已被占用!");
                        return false
                    }
                    if (result==0) {
                        $("#msg").css("color","green")
                        $("#msg").text("该名称可正常使用!");
                    }
                },
                error: function (request) {
                    alert("出错啦");
                    return false;
                }
            })
        });
        $("#shopTypeId1").on("change",function () {
            var shopTypeId = $('#shopTypeId1').val();
            $.ajax({
                url: '/getShopType?typeId=' + shopTypeId,
                type: 'GET',
                success: function (data) {
                    console.log(data)
                    $('#product').empty().append('<option value="">请选择商品</option>');
                    $.each(data, function (index, product) {
                        $('#product').append('<option value="' + product.shopTypeId + '">' + product.shopTypeName + '</option>');
                    });
                }
            });
        })
        $("#updateform").submit(function(){
            var shopTypeName = $('#shopTypeId1 option:selected').text()+"-"+$('#product option:selected').text();
            var address = $('#province option:selected').text()+$('#city option:selected').text()+$('#qu option:selected').text();
            var shopTime=$("#startTime").val()+"-"+$("#endTime").val()
            $("#shopTime").val(shopTime)
            $("#parentTypeId").val($("#shopTypeId1").val())
            $("#shopTypeId").val($("#product").val())
            $("#shopTypeName").val(shopTypeName)
            $("#shopAddress").val(address)
            //
            $.ajax({
                type: "post",
                url: "[[@{/updateShop}]]",
                data: $("#updateform").serialize(),
                success: function (result) {
                    if (result > 0) {
                        alert("成功!");
                        window.location.href = "[[@{/getShopMenu}]]";
                    } else {
                        alert("失败！");
                        return false;
                    }
                },
                error: function (result) {
                    alert("error"+result);
                }
            })
            return false;
        })
    })
</script>